import React, { Component } from "react";
import { Table, Tabs, Card, Switch, Button, Icon } from "antd";
const { TabPane } = Tabs;
const columns = [
  {
    title: "IP黑名单",
    dataIndex: "ip",
  },
  {
    title: "说明",
    width: 800,
    dataIndex: "explain",
  },
  {
    title: "操作",
    dataIndex: "handle",

    render: () => (
      <div>
        <Icon type="delete" style={{ color: "red" }} />
      </div>
    ),
  },
];
const data = [
  {
    key: "1",
    ip: "192.168.33.12",
    explain: "风险设备",
  },
  {
    key: "2",
    ip: "192.168.35.15",
    explain: "风险设备",
  },
  {
    key: "3",
    ip: "192.168.46.88",
    explain: "风险设备",
  },
  {
    key: "4",
    ip: "192.168.98.46",
    explain: "风险设备",
  },
];
const columns1 = [
  {
    title: "IP白名单",
    dataIndex: "ip",
  },
  {
    title: "说明",
    width: 800,
    dataIndex: "explain",
  },
  {
    title: "操作",
    dataIndex: "handle",

    render: () => (
      <div>
        <Icon type="delete" style={{ color: "red" }} />
      </div>
    ),
  },
];
const data1 = [
  {
    key: "1",
    ip: "192.168.33.12",
    explain: "安全设备",
  },
  {
    key: "2",
    ip: "192.168.35.15",
    explain: "安全设备",
  },
  {
    key: "3",
    ip: "192.168.46.88",
    explain: "安全设备",
  },
  {
    key: "4",
    ip: "192.168.98.46",
    explain: "安全设备",
  },
];
// rowSelection object indicates the need for row selection
const rowSelection = {
  onChange: (selectedRowKeys, selectedRows) => {
    console.log(
      `selectedRowKeys: ${selectedRowKeys}`,
      "selectedRows: ",
      selectedRows
    );
  },
  getCheckboxProps: (record) => ({
    disabled: record.name === "Disabled User", // Column configuration not to be checked
    name: record.name,
  }),
};

class roll extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }
  render() {
    const title = (
      <span>
        状态：
        <Switch />
      </span>
    );
    const extra = (
      <div>
        <Button type="primary">
          <Icon type="plus" />
          &nbsp;新增
        </Button>
        &nbsp;
        <Button>
          导出&nbsp;
          <Icon type="arrow-down" />
        </Button>
        &nbsp;
        <Button>
          导入&nbsp;
          <Icon type="arrow-down" />
        </Button>
      </div>
    );
    return (
      <div>
        <Tabs defaultActiveKey="1">
          <TabPane tab="IP黑名单" key="1">
            <Card title={title} extra={extra}>
              <Table
                rowSelection={rowSelection}
                columns={columns}
                dataSource={data}
              />
            </Card>
          </TabPane>
          <TabPane tab="IP白名单" key="2">
            <Card title={title} extra={extra}>
              <Table
                rowSelection={rowSelection}
                columns={columns1}
                dataSource={data1}
              />
            </Card>
          </TabPane>
        </Tabs>
      </div>
    );
  }
}

export default roll;
